<template>
  <div style="background:#f4f4f4">
    <!-- 头部 -->
    <div style="background:white">
      <h2>报销申请</h2>
      <h3 style="font-size:10px">reimbursement</h3>
    </div>
    <form @submit="onsubmit">
      <!-- 基本信息 -->
      <div style="background:white">
        <el-row>
          <el-col :span="24">
            <div class="grid-content1 bg-purple-dark" style="text-align:left;font-weight:bold">|基本信息</div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="3">
            <div class="grid-content bg-purple">申请人</div>
          </el-col>
          <el-col :span="9">
            <div class="grid-content bg-purple-light">
              <span v-bind="username"></span>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="grid-content bg-purple">部门</div>
          </el-col>
          <el-col :span="9">
            <div class="grid-content bg-purple-light">
              <span v-bind="dname"></span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3">
            <div class="grid-content bg-purple">申请时间</div>
          </el-col>
          <el-col :span="9" v-model="apptime">
            <div class="grid-content bg-purple-light">{{apptime}}</div>
          </el-col>
        </el-row>
      </div>
      <!-- 加班信息 -->
      <div style="background:white">
        <el-row>
          <el-col :span="24">
            <div class="grid-content1 bg-purple-dark" style="text-align:left;font-weight:bold">|请假信息</div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="3">
            <div class="grid-content bg-purple">支出日期</div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple-light">
              <div class="block">
                <el-date-picker v-model="date1" type="date" placeholder="选择日期"></el-date-picker>
                <el-time-picker
                  v-model="time1"
                  :picker-options="{selectableRange: '9:00:00 - 18:30:00'}"
                  placeholder="选择时间"
                ></el-time-picker>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3">
            <div class="grid-content bg-purple" style="height:55px">支出事由</div>
          </el-col>
          <el-col :span="21">
            <div class="grid-content bg-purple-light">
              <input
                type="textarea"
                style="border-color:lightgray;width:300px;height:50px"
                v-model="leavereason"
              >
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3">
            <div class="grid-content bg-purple" style="height:55px">提交单据</div>
          </el-col>
          <el-col :span="21">
            <div class="grid-content bg-purple-light">
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                multiple
                :limit="3"
                :on-exceed="handleExceed"
                :file-list="fileList"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
            </div>
          </el-col>
        </el-row>
        <div>
          <input
            type="submit"
            value="提交"
            style="width:120px;height:30px;border-color:lightgray;border-radius:10px;background:#a1bada"
          >
        </div>
      </div>
    </form>
  </div>
</template>
<style>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #eef0f3;
}
.bg-purple {
  background: #d3dce6;
  text-align: center;
}
.bg-purple-light {
  background: #e5e9f2;
  text-align: left;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  margin-top: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
<script>
export default {
  created() {
    this.createTime1();
  },
  data() {
    return {
      fileList: [
        {
          name: "food.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
        },
        {
          name: "food2.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
        }
      ],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: []
      },
      title: "",
      username: "",
      dname: "",
      apptime: "",
      leavetype: "",

      date1: new Date(),
      date2: new Date(),

      time1: new Date(),
      time2: new Date(),
      leavereason: "",
      options: [
        {
          value: "1",
          label: "年假"
        },
        {
          value: "2",
          label: "事假"
        },
        {
          value: "3",
          label: "病假"
        },
        {
          value: "4",
          label: "婚丧假"
        },
        {
          value: "5",
          label: "出差"
        }
      ]
    };
  },
  methods: {
    // 提交申请
    onsubmit() {
      if (this.checkTime()) {
        return false;
      }

      this.$axios
        .post("/leaveapps", {
          title: this.title,
          username: this.username,
          dname: this.dname,
          apptime: this.apptime,
          leavetype: this.leavetype,
          date1: this.date1,
          date2: this.date2,
          time1: this.time1,
          time2: this.time2,
          leavereason: this.leavereason
        })
        .then(res => {
          if (res.status == 200) {
            this.$router.push("/index");
          }
        })
        .catch(error => {
          console.log(error);
        });
    },

    //   时间格式化
    createTime1() {
      var date = new Date();
      var year = date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      // 拼接
      this.apptime =
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds;
    },
    //核对请假时间
    checkTime() {
      var date01 = this.date1;
      var date02 = this.date2;
      var time01 = this.time1;
      var time02 = this.time2;

      if (date01 > date02) {
        alert("日期选择有误，请输入正确请假时间");
        return false;
      }

      if (date01.getTime() == date02.getTime() && time01 > time02) {
        alert("时间选择有误，请输入正确请假时间");
        return false;
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    }
  }
};
</script>
